<template>
  <!-- 盒子将来echarts展示图形图标的节点 -->
  <div class="charts" ref="charts"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import * as echarts from 'echarts'
import { useWeatherStore } from '@/stores/weather'
const weatherStore = useWeatherStore()
const maxtempArray = computed(() => {
  return weatherStore?.weatherdata?.map((data) => data.tempMax)
})
const mintempArray = computed(() => {
  return weatherStore?.weatherdata?.map((data) => data.tempMin)
})

const weekArray = computed(() => {
  return weatherStore?.weatherdata?.map((data) => data.fxDate.slice(5))
})
onMounted(() => {
  setTimeout(function () {
    initmap()
  }, 1000)
})

watch(
  maxtempArray,
  () => {
    initmap()
  },
  {
    deep: true
  }
)
//获取节点
let charts = ref()
const initmap = () => {
  //获取echarts类的实例
  let mycharts = echarts.init(charts.value)
  mycharts.setOption({
    title: {
      text: '七日最高温最低温'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['最低温', '最高温'],
      left: 200,
      top: 0
    },

    calculable: true,
    xAxis: [
      {
        type: 'category',
        // prettier-ignore
        data:weekArray.value
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '最低温',
        type: 'bar',
        data: mintempArray.value,
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      },
      {
        name: '最高温',
        type: 'bar',
        data: maxtempArray.value,
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      }
    ]
  })
}
</script>

<style scoped>
.charts {
  margin-top: 30px;
  width: 100%;
  height: 600px;
}
</style>
